<template>
  <van-goods-action v-if="goods_state !== null" class="goods-action-group">
    <van-goods-action-mini-btn
      icon="shop-o"
      text="店铺"
      :to="'/shop/home/'+detail.shop_id"
      v-if="$store.state.config.addons.shop"
    />
    <DetailServiceBtn :detail="detail" />
    <DetailCollectionBtn :flag="detail.is_collection" :seckill_id="seckill_id" />
    <!-- channel_id 未完善加入购物车功能 暂时禁止 -->
    <template v-if="goods_state === 1">

      <van-goods-action-big-btn
        class="action-btn btn-cart"
        text="加入购物车"
        @click="bindMobile('onSku','add')"
        v-if="!group_id && !presell_id && !bargain_id && !is_virtualgoods"
        :disabled="channel_id ? true : disableOperation"
      />
      <van-goods-action-big-btn
        class="action-btn btn-cart"
        :text="bargainActionBtnText"
        @click="bindMobile('onBargain')"
        v-if="bargain_id"
        :disabled="bargain_status == 'going' ? false : true"
      />
      <van-goods-action-big-btn
        class="action-btn btn-cart"
        v-if="group_id && !onlyRecord_id"
        @click="bindMobile('onSku','aloneBuy')"
      >
        <div class="btn-flex-column">
          <div>{{goodsPrice | yuan}}</div>
          <div>单独购买</div>
        </div>
      </van-goods-action-big-btn>
      <van-goods-action-big-btn
        class="action-btn btn-buy"
        primary
        v-if="group_id"
        @click="bindMobile('onSku','groupBuy')"
      >
        <div class="btn-flex-column">
          <div>{{groupGoodsPrice | yuan}}</div>
          <div>{{onlyRecord_id?'参与':'发起'}}拼团</div>
        </div>
      </van-goods-action-big-btn>
      <van-goods-action-big-btn
        class="action-btn btn-buy"
        primary
        :disabled="actionBtnText == '即将开抢' ? true : disableOperation"
        @click="bindMobile('onSku','buy')"
        v-if="!group_id"
      >
       <span class="money">{{actionBtnText}}<br/><span v-if="userGrade>1">返{{returnMoney}}元</span></span>
      </van-goods-action-big-btn>
 
      <van-goods-action-big-btn
        class="action-btn btn-buy"
        v-if="!group_id"
         @click="ShareBtn"
      >
        <span class="money">推广<br/><span v-if="userGrade>1">赚{{returnMoney}}元</span></span>
      </van-goods-action-big-btn>
    </template>
    <van-goods-action-big-btn
      class="action-btn"
      disabled
      :text="goods_state_text"
      v-if="goods_state !== 1"
    />
          <DetailShareBtn :detail="detail" :goods-price="goodsPrice" ref="ShareBtn" class="ShareBtn"/>
  </van-goods-action>
</template>
<script>
import DetailShareBtn from "./ShareBtn";
import {getSession} from '@/utils/storage'
import { GoodsAction, GoodsActionBigBtn, GoodsActionMiniBtn } from "vant";
import DetailCollectionBtn from "./CollectionBtn";
import DetailServiceBtn from "./ServiceBtn";
import { isEmpty } from "@/utils/util";
import { bindMobile } from "@/mixins";
export default {
  data() {
    return {
      userGrade:0,
      returnMoney:''
    };
  },
  props: {
    seckill_list:{
      type:[String,Object]
    },
    detail: Object,
    goods_state: {
      type: [Number, String]
    },
    goodsPrice: {
      type: String
    },
    groupGoodsPrice: {
      type: String
    },
    onlyRecord_id: {
      type: [String, Number]
    },
    seckill_id: {
      default: false
    },
    group_id: {
      default: false
    },
    presell_id: {
      default: false
    },
    channel_id: {
      default: false
    },
    is_virtualgoods: {
      default: false
    },
    disableOperation: {
      default: false
    },
    bargain_list: {
      type: Object
    },
    goods_state_text: String
  },
  mixins: [bindMobile],
  mounted(){
    this.userGrade = getSession('userGrade')
      let grade=this.detail.goos_bonus
      for(let i in grade){
        if(i==this.userGrade){
          this.returnMoney=grade[i]
        }
      }
  },
  computed: {
    // 砍价id
    bargain_id() {
      return this.bargain_list.bargain_id
        ? this.bargain_list.bargain_id
        : false;
    },
    // 砍价状态
    bargain_status() {
      return !isEmpty(this.bargain_list)
        ? this.bargain_list.status == 1
          ? "going"
          : "unstart"
        : false;
    },
    bargainActionBtnText() {
      let text = "";
      if (this.bargain_id) {
        if (this.bargain_status == "going") {
          if (this.bargain_list.is_join_bargain) {
            text = "邀请砍价";
          } else {
            text = "我要砍价";
          }
        } else if (this.bargain_status == "unstart") {
          text = "我要砍价";
        }
      }
      return text;
    },
    // 秒杀状态 going:正在进行 unstart:未开始 ended:已结束
    seckill_status() {
      console.log(this.seckill_list)
      return !isEmpty(this.seckill_list)
        ? this.seckill_list.seckill_status
        : false;
    },
    actionBtnText() {
      let text = "立即购买";
      if (this.seckill_status) {
        if (this.seckill_status == "going") text = "马上抢";
        if (this.seckill_status == "unstart") text = "即将开抢";
      } else if (this.presell_id) {
        text = "立即预定";
      }
      return text;
    }
  },
  methods: {
    ShareBtn(){
      this.$refs.ShareBtn.onClick()
    },
    onSku(type) {
      this.$emit("onSku", type);
    },
    onBargain() {
      this.$router.push({
        name: "bargain-detail",
        params: {
          goodsid: this.detail.goods_id,
          bargainid: this.bargain_list.bargain_id,
          bargainuid: this.bargain_list.bargain_uid
        }
      });
    }
  },
  components: {
    DetailCollectionBtn,
    DetailServiceBtn,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn,
    DetailShareBtn
  }
};
</script>
<style scoped>
@import url("../../../../assets/styles/action-group.css");
.ShareBtn{
  left: 2000px!important;
}
.van-goods-action {
  z-index: 999;
}
.btn-cart {
  background: #ff9600;
  border: 1px solid #ff9600;
  margin: 0;
  margin-right: 0px!important;
  margin-left: 0px!important;
}

.btn-buy {
    margin-right: 0px!important;
  margin-left: 0px!important;
  font-size: 10px;
  position: relative;
}

.van-button--disabled {
  opacity: 1;
}

.btn-cart.van-button--disabled,
.btn-buy.van-button--disabled,
.van-button--bottom-action.van-button--primary.van-button--disabled {
  color: #999;
  background-color: #e8e8e8;
  border: 1px solid #e5e5e5;
  opacity: 1;
}

.btn-flex-column {
  display: flex;
  flex-flow: column;
  line-height: 1.2;
  font-size: 12px;
}

.btn-flex-column > div {
  width: 90%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0 auto;
}
</style>


